<template>
  <div>
    <el-collapse accordion>
      <el-collapse-item v-for="(list,index) in noticeData" :key="index">
        <template slot="title">
          <span @click="noticeActive(list.id,list.readType)" v-if="list.readType === 0">[未读]</span>
          <span @click="noticeActive(list.id,list.readType)" v-if="list.readType === 1" class="actived">[已读]</span>
          <b @click="noticeActive(list.id,list.readType)">{{ list.messageName }} ||<i class="el-icon-alarm-clock"> <i
            class="el-icon-time">{{ list.createDt.substring(0, 11) }}</i></i></b>
        </template>
        <div>{{ list.messageBody }}</div>
      </el-collapse-item>
    </el-collapse>
    <el-pagination
      :current-page="messageLogQuery.pageIndex"
      :total="total"
      :page-size="messageLogQuery.pageSize"
      style="padding: 30px 0; text-align: end"
      layout="total, prev, pager, next,jumper"
      @current-change="fetchData"
    />
  </div>
</template>
<script>
import user from "@/api/acl/user.js";

export default {
  name: "notice",
  data() {
    return {
      noticeData: [],//系统通知数据
      messageLog: {
        id: null,
        readType: null
      },
      total: 0,
      messageLogQuery: {
        pageIndex: 1,
        pageSize: 10,
        status: null,
        type: null,
        messageName: null,
        readType: null
      },
    }
  },
  mounted() {
    this.getNotice();
  },
  methods: {
    //获取通知
    getNotice() {
      // .....获取消息数据.....
      user.getMessageLogList(this.messageLogQuery).then(response => {
        this.noticeData = response.list
        this.total = response.total
      })
    },
    fetchData(val) {
      this.messageLogQuery.pageIndex = val;
      this.getNotice();
    },
    //设置点击过的系统消息已读  参数消息id 消息是否阅读状态status(1已读,0未读)
    noticeActive(eventId, eventStatus) {
      console.log(eventId, eventStatus);
      if (eventStatus === 0) { //阅读状态是未读提交已读申请
        this.messageLog.id = eventId
        this.messageLog.readType = 1
        user.updateMessageRead(this.messageLog).then(response => {
          this.getNotice();
        })
      }
    }
  }
}
</script>
<style>
.el-collapse {
  border: none;
}

.el-collapse div:last-child > div div {
  border: none;
}

.el-collapse-item__header {
  position: relative;
  font-size: 16px;
  justify-content: space-between;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.el-collapse-item__header b {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: normal;
}

.is-active b {
  padding-left: 20px;
  transition: all .5s;
}

.el-collapse-item__header .time {
  position: absolute;
  right: 30px;
  font-size: 14px;
}

.el-icon-alarm-clock:before {
  margin-right: 100px;
}

.el-collapse-item__header span {
  font-size: 12px;
  color: brown;
  margin-right: 10px;
}

.el-collapse-item__header span.actived {
  color: #666;
}

.el-collapse-item__content {
  font-size: 14px;
  line-height: 26px;
  padding: 30px 20px;
  color: #666;
  background: #f8f8f8;
}

</style>
